<template>
	<div class="width-100-percent">
		<el-cascader
			v-model="ids"
			:options="treeData"
			class="width-100-percent"
			placeholder="物料分类"
			highlight-current
			:props="{
				children: 'children',
				value: 'id',
				checkStrictly: true,
				label: 'nameAndCode',
				lazyLoad: loadNode,
				lazy: true
			}"
			@change="onCategoryChange"
		></el-cascader>
	</div>
</template>
<script>
    export default {
        props: {
            value: {
                type: Array,
                default: () => []
            },
            treeData: {
                type: Array,
                default: () => []
            },
            loadNode: {
                type: Function,
                default: () => {}
            }
        },
        data() {
            return {
                ids: []
            };
        },
        methods: {
            onCategoryChange(e) {
                this.$emit('change', e);
            }
        },
        watch: {
            value: {
                handler(newVal) {
                    this.ids = newVal ? JSON.parse(JSON.stringify(newVal)) : [];
                },
                immediate: true
            }
        }
    };
</script>
